<template>
  <div>
    <div style="width: 100%; background-color: #fff">
      <el-carousel :interval="4000" type="card" height="290px" arrow="always" class="el-carousel"
        indicator-position="none">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="`${banner.imageUrl}?param=730y285`" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="main">
      <div class="left">

        <!-- 热门推荐 -->
        <div class="left-top">
          <img src="./bg.png" />
          <el-button type="text">
            <h2 style="color: #000000; margin-right: 15px">
              热门推荐
            </h2>
          </el-button>
          <ul>
            <li><a href="#">华语</a></li>
            <li><a href="#">流行</a></li>
            <li><a href="#">摇滚</a></li>
            <li><a href="#">民谣</a></li>
            <li><a href="#">电子</a></li>
          </ul>
        </div>
        <hr color="#C20C0C" style="margin-bottom: 20px" />
        <Playlists></Playlists>

        <!-- 新碟上架 -->
        <NewestAlbum :newestAlbum="newestAlbum" />

        <!-- 榜单 -->
        <Hotlist />
      </div>

      <Right />
    </div>
  </div>
</template>

<script>
import Playlists from "./Playlists";
import Right from "./right";
import NewestAlbum from "./NewestAlbum/index.vue";
import Hotlist from "./Hotlist/index.vue";

export default {
  name: "Recommend",
  components: {NewestAlbum, Playlists, Right, Hotlist },
  data() {
    return {
      banners: [],
      swiperOptions: {
        initialSlide: 0,
        slidesPerView: 5,
        slidesPerGroup: 5,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      topAlbum: [],
      newestAlbum: [],
    };
  },
  mounted() {
    // 获取轮播图数据
    this.$API.getBanner().then((res) => {
      if (res.status === 200) {
        this.banners = res.data.banners;
      }
    });

    // 新碟上架
    this.$API.albumNewest().then((res) => {
      if (res.data.code === 200) {
        this.newestAlbum = res.data.albums.splice(0,10);
      }
    });

  },
  methods: {
    changeMusiclist(list) {
      this.$bus.$emit("changeMusiclist", list);
    },
  },
};
</script>

<style scoped lang='less'>
.el-carousel {
  width: 1460px;
  margin: 0 auto;
}

.main {
  width: 1020px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;

  .left {
    width: 770px;
    padding: 20px;
    border: 1px solid #f5f5f5;

    .el-icon-s-help {
      color: #c20c0c;
    }

    .left-top {
      display: flex;
      align-items: center;

      ul {
        display: flex;
        flex-flow: row nowrap;

        li {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
